---
permalink: "/backend/advanced/community/nav-back/screen.xml"
hv_title: "Nav Back"
---

{% from 'macros/button/index.xml.njk' import button %}
{% from 'macros/description/index.xml.njk' import description %}
{% extends 'templates/base.xml.njk' %}

{% block styles %}
  {% include './_styles.xml.njk' %}
{% endblock %}

{% block body %}
  <safe-area:safe-area-view
    xmlns:safe-area="https://hyperview.org/safe-area"
    key="header-container"
    safe-area:mode="padding"
    safe-area:insets="[&quot;right&quot;,&quot;top&quot;,&quot;left&quot;]"
  >
    <header style="header">
      <nav:back xmlns:nav="https://hyperview.org/navigation">
        <view
          nav:role="close"
          action="close"
          href="#"
          style="header-btn"
        >
          {% include 'icons/close.svg' %}
        </view>
        <view
          nav:role="back"
          action="back"
          href="#"
          style="header-btn"
        >
          {% include 'icons/back.svg' %}
        </view>
      </nav:back>
      <text style="header-title">{{ hv_title }}</text>
    </header>
  </safe-area:safe-area-view>
  <text style="text">
    The button to navigate back to the previous screen will be rendered dynamically,
    based on which kind of navigator the screen is currently loaded on. For regular screens
    (added to the stack via "push" action), a back-arrow button will be rendered. For
    modal screens (added to the stack via "new" action), a close button will be rendered.
    Also (not demo'd here), if the screen is the first screen of the stack and there is no
    place to navigate back to, no button will be rendered.
  </text>
{% endblock %}
